<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="application/javascript">
        let errorStatus = {
            404: function () {
                alert("该资源不存在")
            },
            500: function () {
                alert("系统异常，请稍后再试")
            }
        }
        $(function () {
            $("#btn1").click(function () {
                $.ajax({
                    url:"http://localhost:8080/rest/stu/"+$("#id").val(),
                    async:true,
                    type:"GET",
                    contentType: 'application/json',
                    success:function(stu){
                        alert("查询成功");
                        let html = "";
                        html += "学号:";
                        html += stu.stuno;
                        html += "<br/>";
                        html += "姓名:";
                        html += stu.name;
                        html += "<br/>";
                        html += "性别:";
                        html += stu.sex === 0 ? "女":"男";
                        html += "<br/>";
                        html += "国籍:";
                        html += stu.country === 0 ? "中国":stu.country === 1 ? "美国":"德国";
                        html += "<br/>";
                        html += "生日:";
                        html += stu.birth;
                        html += "<br/>";
                        html += "爱好:";
                        if (stu.hobby.indexOf('music') !== -1)
                        html += "音乐 ";
                        if (stu.hobby.indexOf('sport') !== -1)
                            html += "运动 ";
                        if (stu.hobby.indexOf('java') !== -1)
                            html += "Java ";

                        $("#div1").html(html);

                    },
                    statusCode:errorStatus
                })
            })

            $("#btn2").click(function () {
                $.ajax({
                    url:"http://localhost:8080/rest/stu/",
                    async:true,
                    type:"GET",
                    contentType: 'application/json',
                    success:function(list){
                       let html = "<table border='1'>"
                        html += "<tr><th>ID</th><th>学号</th><th>姓名</th><th>性别</th><th>生日</th><th>国籍</th><th>爱好</th></tr>"
                        $.each(list,function (i,stu){
                            console.log(stu)
                            html += "<tr>"
                            html += "<td>" + stu.id +"</td>"
                            html += "<td>" + stu.stuno +"</td>"
                            html += "<td>" + stu.name +"</td>"
                            html += "<td>"
                            html += stu.sex ===  0 ? "女":"男"
                            html += "</td>"
                            html += "<td>" + stu.birth +"</td>"
                            html += "<td>"
                            html += stu.country === 0 ? "中国":stu.country === 1 ? "美国":"德国"
                            html += "</td>"
                            html += "<td>"
                            if (stu.hobby.indexOf('music') !== -1)
                                html += "音乐 "
                            if (stu.hobby.indexOf('sport') !== -1)
                                html += "运动 "
                            if (stu.hobby.indexOf('java') !== -1)
                                html += "Java "
                            html += "</td>"
                            html += "</tr>"
                        })
                        html += "</table>"
                        $("#div2").html(html);
                    },
                    statusCode:errorStatus
                })
            })
            $("#btn3").click(function (){
                $("#div3").show('slow');
                $("#submitBtn").click(function (){
                    let formParamsArray = $("#myform").serializeArray();
                    console.log("formParamsArray="+formParamsArray);
                    let restJson = {};
                    let hobbyArr = [];
                    for (let i = 0; i < formParamsArray.length; i++) {
                        let param = formParamsArray[i];
                        if(param.name == 'hobby'){
                            hobbyArr.push(param.value);
                        }
                        else {
                            // console.log(param)
                            restJson[param.name] = param.value;
                        }
                    }
                    //将数组元素用逗号拼接成字符串
                    restJson.hobby = hobbyArr.join();
                    let restJsonStr = JSON.stringify(restJson);
                    $.ajax({
                        url:"http://localhost:8080/rest/stu",
                        async:true,
                        type:"POST",
                        data:restJsonStr,
                        dataType:"json",
                        contentType: 'application/json',
                        success:function () {
                            alert("添加成功");
                        },
                        statusCode: {
                            400: function () {
                                alert('参数不正确');
                            }
                        }
                    })
                })
            })

            $("#btn4").click(function () {
                $.ajax({
                    url:"http://localhost:8080/rest/stu/"+$("#id2").val(),
                    async:true,
                    type:"GET",
                    contentType: 'application/json',
                    success:function(stu){
                       $("#id3").val(stu.id);
                       $("#stuno").val(stu.no);
                       $("#stuname").val(stu.name);
                       $("#stubirth").val(stu.birth);
                        $("#country").val(stu.country);
                        if(stu.sex === 0){
                            $("#female").prop("checked","checked");
                        }else{
                            $("#male").prop("checked","checked");
                        }
                        if(stu.hobby.indexOf('music') !== -1){
                            $("#music").prop("checked","checked");
                        }
                        if(stu.hobby.indexOf('sport') !== -1){
                            $("#sport").prop("checked","checked");
                        }
                        if(stu.hobby.indexOf('java') !== -1){
                            $("#java").prop("checked","checked");
                        }
                        $("#div3").show('slow');
                        $("#submitBtn").bind('click',function () {
                            let formParamsArray = $("#myform").serializeArray();
                            console.log("formParamsArray="+formParamsArray);
                            let restJson = {};
                            let hobbyArr = [];
                            for (let i = 0; i < formParamsArray.length; i++) {
                                let param = formParamsArray[i];
                                if(param.name === 'hobby'){
                                    hobbyArr.push(param.value);
                                }
                                else {
                                    // console.log(param)
                                    restJson[param.name] = param.value;
                                }
                            }
                            //将数组元素用逗号拼接成字符串
                            restJson.hobby = hobbyArr.join();
                            let restJsonStr = JSON.stringify(restJson);
                            $.ajax({
                                url:"http://localhost:8080/rest/stu/"+$("#id3").val(),
                                async:true,
                                type:"PUT",
                                data:restJsonStr,
                                dataType:"json",
                                contentType: 'application/json',
                                statusCode: {
                                    200: function () {
                                        alert("修改成功")
                                    }
                                }
                            })
                        })

                    },
                    statusCode:errorStatus
                })
            })
        })

    </script>
</head>
<body>
请输入学生的ID:<input type="text" id="id">
<button id="btn1">查询</button>
<p/>
<button id="btn2">查询所有学生的信息</button>
<p/>
<button id="btn3">添加学生信息</button>
<p/>
请输入学生ID<input type="text" id="id2"><button id="btn4">修改学生信息</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3" style="display: none">
    <form id="myform">
        <label for="stuno">学号</label>
        <input type="text" id="stuno" name="stuno" ></br>
        <label for="name">姓名</label>
        <input type="text" id="name" name="name" ></br>
        <label for="birth">生日</label>
        <input type="text" id="birth" name="birth"></br>
        <label for="country">国籍</label>
        <select id="country" name="country">
            <option value="">请选择</option>
            <option value="0">中国</option>
            <option value="1">美国</option>
            <option value="2">德国</option>
        </select></br>
        <label for="sex">性别</label>
        <input type="radio" name="sex" value="0" checked="checked" id="female"><label for="female">女</label>
        <input type="radio" name="sex" value="1"  id="male"><label for="male">男</label>
        </br>
        <label for="hobby">爱好</label>
        <input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label>
        <input type="checkbox" name="hobby" value="sport" id="sport"><label for="sport">运动</label>
        <input type="checkbox" name="hobby" value="java" id="java"><label for="java">Java</label>
        </br>
        <button id="submitBtn" type="button">提交</button>
    </form>
</div>
</body>
</html>